"use client"

import { useState } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { useScrollContainer } from "./use-scroll-container"

interface ProductImage {
    id: number
    src: string
    alt: string
}

interface ProductGalleryProps {
    images: ProductImage[]
    title: string
    modelNumber?: string
    thumbnailsToShow?: number
}

export function ProductGallery({ images, title, details, description, thumbnailsToShow = 4 }: ProductGalleryProps) {
    const [currentImageIndex, setCurrentImageIndex] = useState(0)
    const {
        containerRef: thumbnailsContainerRef,
        isScrolledToStart,
        isScrolledToEnd,
        scrollLeft: scrollThumbnailsLeft,
        scrollRight: scrollThumbnailsRight,
    } = useScrollContainer()

    const selectImage = (index: number) => {
        setCurrentImageIndex(index)
    }

    const shouldShowArrows = images.length > thumbnailsToShow

    return (
        <div className="block md:grid grid-cols-2 gap-8 items-start">
            {/* Left side - img gallery */}
            <div className="relative space-y-4">
                {/* Main image */}
                <div className="relative aspect-square bg-white rounded-lg flex items-center justify-center">
                    <img
                        src={images[currentImageIndex].src}
                        alt={images[currentImageIndex].alt}
                        className="object-cover transition-opacity duration-300 h-full"
                    />
                </div>

                {/* Thumbnails with navigation */}
                <div className="space-x-3 flex items-center">
                    {/* Thumbnails row */}
                    {shouldShowArrows &&
                        <button
                            onClick={() => scrollThumbnailsLeft()}
                            className="bg-white h-6 rounded-md px-1 shadow-md hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            aria-label="Previous thumbnails"
                            disabled={isScrolledToStart}
                        >
                            <ChevronLeft className="h-4 w-4" />
                        </button>}
                    <div className="flex space-x-2 overflow-x-auto pb-2 scroll-smooth items-center justify-center w-full" ref={thumbnailsContainerRef}>
                        {images.map((image, index) => (
                            <button
                                key={index}
                                onClick={() => selectImage(index)}
                                className={`relative flex items-center justify-center w-16 h-16 rounded-md overflow-hidden flex-shrink-0 border-2 transition-all duration-200 ${currentImageIndex === index ? "border-[#376295] ring-2 ring-primary/20" : "border-transparent hover:border-gray-300"}`}
                                aria-label={`View ${image.alt}`}
                            >
                                <img
                                    src={image.src}
                                    alt={image.alt}
                                    className="object-cover h-full"
                                />
                            </button>
                        ))}
                    </div>
                    {shouldShowArrows && (
                        <button
                            onClick={() => scrollThumbnailsRight()}
                            className="bg-white h-6 rounded-md px-1 shadow-md hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            aria-label="Next thumbnails"
                            disabled={isScrolledToEnd}
                        >
                            <ChevronRight className="h-4 w-4" />
                        </button>
                    )}
                </div>
            </div>

            {/* Right side - Product details */}
            <div className="space-y-4">
                <div>
                    <h1 className="text md:text-2xl font-bold tracking-tight">{title}</h1>
                    {description && <p className="text-sm md:text-base text-[#087AD1]">{description}</p>}
                </div>

                <div className="border-t pt-4">
                    {/* This is where you would add your product details/features */}
                    <div className="space-y-6">
                        <p className="text-sm text-[#0C0C0C] whitespace-pre-line" dangerouslySetInnerHTML={{
                            __html: details
                        }
                        }>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}
